<template>
  <div class="nav-bar">
    <van-nav-bar
  :title="title"
  :left-text="leftText"
  :left-arrow="leftArrow" 
  @click-left="handleBack"
>
<template #right> 
  <van-popover
  placement="bottom-end"
   v-model:show="showPopover"
    :actions="actions"
     @select="onSelect">
  <template #reference>
    <van-icon name="ellipsis"  size="24"/>
  </template>
</van-popover>

</template>
</van-nav-bar>
</div> 
</template>

<script setup lang="ts">
import { computed , ref} from 'vue';
import { useRoute, useRouter } from 'vue-router';
// import { showToast } from 'vant';

//调用 useRouter（） 方法，获取当前激活的路由对象的引用
//这与在选项式 API中使用的this.$router 一致

const router = useRouter()

//调用 useRouter（） 方法，获取当前激活的路由对象的引用
//这与在选项式 API中使用的this.$router 一致

const route = useRoute()

//当前页面标题
const title  = computed( ()=> (route.meta?.title ?? "点点购物") as string )


// 后退
const handleBack = () =>{
  // window.history.back()
  router.back()
}


//是否显示弹出菜单
const showPopover = ref(false);

// 通过 actions 属性来定义菜单选项
const actions = [
  { text: '首页' ,icon:"home-o",path:"/home"},
  { text: '购物车',icon:"shopping-cart-o",path:"/cart" },
  { text: '我的' ,icon:"user-o",path:"/mine"},
];
const onSelect = (action: any) => {
  console.log("action:",action)
  router.push(action.path)
};

//当前是否tabbar 页面，后退返回操作是否可用
const leftText= computed(()=>route.meta?.inTabbar ? "" :"返回")
const leftArrow = computed(()=>route.meta?.inTabbar !== true)
</script>

<style lang="less" scoped>

</style>
 